/**
 * Variables
 */

// Colors
$color-base: #222;
$color-primary: #164BC5;
$color-secondary: #0F9640;

$color-white: #FFF;
$color-gray: lighten($color-base, 35%);
$color-gray-shadow: lighten($color-base, 60%);
$color-gray-light-shadow: lighten($color-base, 70%);
$color-gray-border: lighten($color-base, 77%);
$color-gray-bg: lighten($color-base, 82%);

$color-primary-light: lighten($color-primary, 50%);

$color-hn: #ff6600;
$color-facebook: #3b5998;
$color-twitter: #1da1f2;
$color-linkedin: #0077b5;
$color-reddit: #ff4500;

// Typographic
$typographic-font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;

$typographic-root-font-size: 100;
$typographic-base-font-size: 16px;
$typographic-small-font-size: 14px;

$typographic-base-line-height: 1.625;

$typographic-base-font-color: $color-base;
$typographic-light-font-color: $color-gray;
$typographic-link-p-font-color: $color-primary;
$typographic-link-s-font-color: $color-secondary;

$typographic-leading: round(16 * ($typographic-root-font-size / 100) * $typographic-base-line-height);

// Buttons
$button-height: 35px;

// Layout
$layout-post-single-width: 945px;
$layout-post-width: $layout-post-single-width - 245px;

$layout-width: 1070px;
$layout-breakpoint-sm: 685px;
$layout-breakpoint-md: 960px;
$layout-breakpoint-lg: 1100px;

$layout-mobile-padding: 15px;
